<template>
  <div class="column-detail">
    <div class="media" v-if="column">
      <div class="media-img">
        <!-- <img v-if="column && column.image" :src="column.image && column.image.url ? column.image.url : defaultUrl" class="img-thumbnail" :alt="column.title" /> -->
      </div>
      <div class="media-content">
        <h2 class="title">{{ column.title }}</h2>
        <p class="subtitle">{{ column.description }}</p>
      </div>
    </div>
    <section class="content">
      <div class="card mb-3" v-for="list in lists" :key="list.id">
        <div class="row">
          <div class="col-md-2 image">
            <!-- <img :src="list.image ? list.image : defaultUrl" /> -->
          </div>
          <div class="col-md-10 desc">
            <div class="card-body">
              <h5 class="card-title">{{ list.title }}</h5>
              <p class="card-text">{{ list.content }}</p>
              <p style="font-size: 12px">
                {{ dayjsFormat(list.createtime).format('YYYY-MM-DD HH:mm:ss') }}
              </p>
            </div>
            <button class="btn btn-primary btn-sm" @click="goDetail(list.id)">查看详情</button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import imageUrl from '@/assets/default.png';
import dayjs from 'dayjs';
export default defineComponent({
  name: 'column-detail',
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    const code = route.params.cid; // 将数字转字符串
    const dayjsFormat = (str: string) => dayjs(str);
    // 获取栏目和文件列表数据
    const column = computed(() => store.getters.getColumn());
    const lists = computed(() => store.getters.getPosts());
    // 获取接口数据
    onMounted(() => {
      store.dispatch('fetchColumn', code);
      store.dispatch('fetchArticles', code);
    });

    const defaultUrl = ref<string>(imageUrl);
    const goDetail = (id: string) => {
      router.push({
        name: 'article',
        params: {
          id
        }
      });
    };
    return { route, column, lists, defaultUrl, dayjsFormat, goDetail };
  }
});
</script>

<style lang="less" scoped>
.column-detail {
  background: #eaeaea;
  padding: 20px;
  .media {
    .media-img {
      text-align: center;
      border-bottom: 1px solid #d6d6d6;
      padding-bottom: 10px;
      margin-bottom: 10px;
      img {
        width: 200px;
        height: 200px;
        border-radius: 50%;
      }
    }
    .media-content {
      .subtitle {
        color: #8b8d94;
      }
    }
  }
  .content {
    .row {
      .image {
        text-align: center;
        padding: 20px;
        border-right: 1px solid #d6d6d6;
        img {
          width: 120px;
          height: 120px;
        }
      }
    }
  }
}
</style>
